<template>
  <div class="survey al-content">
    <div class="al-query-wrapper al-flex-between">
      <!--       size="mini"-->
      <el-button type="primary" @click="toPage('edit')">
        <i class="el-icon-edit" style="color: #fff;"/>
        创建问卷
      </el-button>
      <div class="al-wrapper-search">
        <el-input class="al-width-300" v-model="keyword" placeholder="输入问卷名称" @keyup.enter.native="surveyQuery"/>
        <el-button size="mini" type="primary" @click="surveyQuery">查询</el-button>
      </div>
    </div>

    <wx-table ref="tab" :labels="tbLabels"
              :auto-height="true"
              search-api="/wxqy/activity/survey/list">
      <template #status="{param}">
        <div v-html="surveyStatus(param)"></div>
      </template>
      <template #control="{param}">
        <wx-link @click.native="toPage('edit',param.id)">编辑</wx-link>
        <wx-link @click.native="copyLink(param)">复制链接</wx-link>
        <wx-link>删除</wx-link>
      </template>
    </wx-table>
  </div>
</template>

<script>
import WxTable from "@/components/wxqy/table/WxTable";
import WxLink from "@/components/wxqy/wxLink/wxLink";
import {getTeamId} from "@/utils/auth";

export default {
  name: "index",
  components: {WxLink, WxTable},
  data() {
    return {
      tbLabels: [{label: '标题', prop: 'title'}, {label: '开始时间', prop: 'beginTime'},
        {label: '结束时间', prop: 'endTime'}, {label: '状态', prop: 'status', width: 80},
        {label: '创建人', prop: 'creator', width: 120}, {label: '更新日期', prop: 'modifyTime'}],
      keyword: ''
    }
  },
  methods: {
    surveyQuery() {
      this.$refs.tab.search({keyword: this.keyword})
    },
    surveyStatus(row) {
      let {status} = row
      if (status === 2) {
        return `<span class="survey-no-start">未开始</span>`
      }
      if (status === 3) {
        return `<span class="survey-start">进行中</span>`
      }
      return `<span class="survey-end">已结束</span>`
    },
    toPage(path, id) {
      this.$router.push({path: path, query: {id}})
    },
    copyLink(param) {
      const oInput = document.createElement('input')
      // 这边为链接地址this.liveLink='www.baidu.com'
      oInput.value = process.env.VUE_APP_MOBILE_DOMAIN + '?t=' + getTeamId() + '&sign=' + param.sign
      document.body.appendChild(oInput)
      oInput.select()
      console.log(oInput.value)
      document.execCommand('Copy')
      oInput.remove()
      this.$message.success('复制成功')
    }
  }
}
</script>

<style scoped lang="scss">
.survey {

  ::v-deep.survey-no-start {
    color: dodgerblue;
  }

  ::v-deep.survey-start {
    color: orangered;
  }

  ::v-deep.survey-end {
    color: #8a8a8b;
  }
}
</style>
